<template>
  <div class="water-record-main">
    <ul>
      <li class="fs16 bgcFFF line-bottom"
        v-for="(item, index) in dataArr"
        :key="index">
        <p>水卡订水 <span class="flr color3D7EFF">{{item.num}}桶</span></p>
        <p class="fs12 color999AA3">{{item.time}}</p>
      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  import NoneData from '../../components/noneData.vue'

  export default {
    compontent: {

    },
    data() {
      return {
        dataArr: [
          {
            num: 2,
            time: '2019-02-24 10:30:24'
          },
          {
            num: 1,
            time: '2019-03-24 10:30:24'
          },
          {
            num: 2,
            time: '2019-02-24 10:30:24'
          },
          {
            num: 2,
            time: '2019-02-24 10:30:24'
          },
          {
            num: 1,
            time: '2019-03-24 10:30:24'
          },
          {
            num: 2,
            time: '2019-02-24 10:30:24'
          },
          {
            num: 1,
            time: '2019-03-24 10:30:24'
          },
          {
            num: 2,
            time: '2019-02-24 10:30:24'
          },
          {
            num: 1,
            time: '2019-03-24 10:30:24'
          },
          {
            num: 2,
            time: '2019-02-24 10:30:24'
          },
          {
            num: 1,
            time: '2019-03-24 10:30:24'
          },
          {
            num: 2,
            time: '2019-02-24 10:30:24'
          },
          {
            num: 1,
            time: '2019-03-24 10:30:24'
          },
          {
            num: 2,
            time: '2019-02-24 10:30:24'
          },
          {
            num: 1,
            time: '2019-03-24 10:30:24'
          },
          {
            num: 2,
            time: '2019-02-24 10:30:24'
          },
          {
            num: 1,
            time: '2019-03-24 10:30:24'
          },
        ],
      }
    },
    mounted() {
      window.addEventListener("scroll", this.handleScroll, true);
    },
    methods: {
      // 监听滚动条
      handleScroll(e) {
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        let scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        //变量windowHeight是可视区的高度
        let windowHeight =
          document.documentElement.clientHeight || document.body.clientHeight;
        //变量scrollHeight是滚动条的总高度
        let scrollHeight =
          document.documentElement.scrollHeight || document.body.scrollHeight;

        //滚动条到底部的条件
        if (scrollHeight - (scrollTop + windowHeight) <= 100) {
          console.log('add data');
        }
      },
    },
    destroyed() {
      window.removeEventListener("scroll", this.handleScroll, false);
    },
  }
</script>

<style scoped lang="scss">
  @import "../../assets/css/waterRecords.scss";
</style>
